<template>
  <div class="changehistory">
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      :before-close="closeDialog"
      :close-on-click-modal="false"
      width="50%">
      <!-- 表单部分 -->
      <el-row>
        <dynTable
          ref="dynTable"
          :loading="false"
          :table-data="tableData"
          :table-columns="tableColumns"
        />
      </el-row>
      <!--分页组件-->
      <pagination
        :total="total"
        :page.sync="listQuery.page"
        :size.sync="listQuery.size"
        @pagination="getList"
      />
    </el-dialog>
  </div>
</template>

<script>
import crudJob from '@/api/system/changehistory'
import mySetting from '@/mixins/mySetting'
import { clearNull } from '@/utils/myTools'
import Pagination from '@/components/Pagination'

export default {
  name: 'Changehistory',
  components: { Pagination },
  mixins: [mySetting],
  // 数据字典
  data() {
    return {
      tableName: '',
      key: '',
      dialogVisible: false,
      title: this.$t('modifyHistory'), // 弹窗标题
      tableColumns: [
        { prop: '', label: this.$t('index'), type: 'index', width: '50px', templete: (_scope) => {
          return (
            <span>{ (this.listQuery.page - 1) * this.listQuery.size + _scope.$index + 1 }</span>
          )
        } },
        {
          prop: 'changeItem',
          label: this.$t('changeItem')
        },
        {
          prop: 'changeContent',
          label: this.$t('changeContent')
        },
        {
          prop: 'changeTime',
          label: this.$t('changeTime')
        },
        {
          prop: 'changeUserId',
          label: this.$t('operator')
        }
      ]
    }
  },
  created() {

  },
  methods: {
    getList(val) {
      this.options.loading = true
      this.initList()
    },
    // 初始化列表
    initList() {
      let obj = {
        tableName: this.tableName,
        key: this.key,
        ...this.listQuery
      }

      obj = clearNull(obj)
      crudJob.getList(obj).then(res => {
        this.tableData = res.data
        this.total = res.total
        this.options.loading = false
      })
    },
    openDialog(tableName, key) {
      console.log(key)
      this.dialogVisible = true
      this.tableName = tableName
      this.key = key

      this.initList()
    },
    // 关闭弹窗清空数据
    closeDialog() {
      this.dialogVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/defaultStyle.scss";
</style>
